<template>
  <json-editor-vue
    class="editor"
    v-model="jsonobj"
    @blur="remarkValidate"
    currentMode="text"
    :modeList="modeList"
    :options="options"
  />
</template>

<script setup>
  import JsonEditorVue from 'json-editor-vue3'
  import { ref } from 'vue'

  const jsonstr = ref('{ "name": "xiaoming", "age": "18"}')
  const jsonobj = ref(JSON.parse(jsonstr.value))

  const options = ref({
    search: false,
    history: false,
  })
  const modeList = ref(['text', 'view', 'tree', 'code', 'form']) // 可选模式

  const remarkValidate = () => {
    let newjsonstr = JSON.stringify(jsonobj.value)
    console.log('remarkValidate', jsonobj.value, newjsonstr, jsonstr.value)
    if (jsonstr.value == newjsonstr) {
      console.log('no change')
    } else {
      jsonstr.value = newjsonstr
    }
  }
</script>
<style>
  .editor {
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
  }
</style>
